<template>
  <div>
    <v-centerForm>
      <template slot='right'>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="addMenu('添加','add', null)">添加</el-button>
      </template>
    </v-centerForm>
    <v-tableEncapsulation row-key="id" ref="permissionTable" :loading="loadingBtn.treeLoading" :columnData="columnData"
                         :tree-props="{children: 'pChild'}"
                         :is-pagination="false"
                         :tableData="treeInfo.permissionTreeData"
    >
      <el-table-column align="center" slot="img"
                       label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.img"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" slot="operate"
                       label="操作" width="200">
        <template slot-scope="scope" v-if="!scope.row.init">
          <el-tooltip v-if="scope.row.type==='page'||scope.row.type==='menu'" class="item" effect="dark" content="添加"
                      placement="top">
            <i class="el-icon-circle-plus-outline table-icon-btn color-primary"
               @click="addMenu('添加','add', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <i class="el-icon-view table-icon-btn color-success" @click="addMenu('查看','view', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="el-icon-edit-outline table-icon-btn color-primary" @click="addMenu('编辑','edit', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i class="el-icon-delete table-icon-btn color-error" @click="delMenu(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </v-tableEncapsulation>
    <el-dialog v-dialogDrag :title="dialog.title" :visible.sync="dialogVisible"
               @closed="closeDialog">
      <el-form :disabled="dialog.flag === 'view'" v-loading="loadingBtn.diaSubmitBtn" :model="menuForm" ref="menuForm"
               :label-width="formLabelWidth"
               :rules="dialog.flag === 'view' ? null : menuFormRule">
        <el-form-item label="名称" prop="label">
          <el-input v-model="menuForm.label"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group :disabled="dialog.flag === 'view'" v-model="menuForm.type" placeholder="选择类型">
            <el-radio border v-for="(item) in permissionType" :key="item.id" :label="item.id"
                      :value="item.id">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="menuForm.type==='menu'||menuForm.type==='page'" label="图标" prop="img">
          <el-select v-model="menuForm.img">
            <el-option :value="item.pName" v-for="item in iconArr" :key="item.id">
              <i style="float: left;line-height: 34px;" :class="item.pName"></i>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.pName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="menuForm.type==='menu'||menuForm.type==='page'" label="排序" prop="order">
          <el-input v-model.number="menuForm.order"></el-input>
        </el-form-item>
        <el-form-item v-if="menuForm.type==='page'" label="页面显隐" prop="show">
          <el-switch :disabled="dialog.flag === 'view'"
                     v-model="menuForm.show"
                     active-text="显示"
                     inactive-text="隐藏">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="menuForm.type==='page'" label="url" prop="url">
          <el-input v-model="menuForm.url"></el-input>
        </el-form-item>
        <el-form-item v-if="menuForm.type==='button'||menuForm.type==='api'" label="权限标识"
                      prop="code">
          <el-input v-model="menuForm.code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loadingBtn.diaSubmitBtn" type="primary" @click="menuFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectOne, deleteById, insert, update, getRightsList } from '@/api/system/rightsManagement'
import { listDicByParentCode } from '@/api/system/dictionary'
import { validUppercaseLetter } from '@/common/validate/formValidate'

export default {
  name: 'rightsManagement',

  data () {
    return {
      iconArr: [],
      loadingBtn: {
        diaSubmitBtn: false,
        treeLoading: false
      },
      columnData: [
        {
          label: '名称',
          prop: 'label'
        }, {
          label: '图标',
          slot: 'img'
        }, {
          label: '排序',
          prop: 'order'
        }, {
          label: '权限标识',
          prop: 'code'
        }, {
          label: '页面url',
          prop: 'url'
        }, {
          slot: 'operate',
          label: '操作'
        }
      ],
      permissionType: [
        { id: 'menu', label: '菜单' },
        { id: 'page', label: '页面' },
        { id: 'button', label: '按钮' },
        { id: 'api', label: '接口' }
      ],
      treeInfo: {
        permissionTreeData: []
      },
      dialog: {
        title: '',
        flag: ''
      },
      dialogVisible: false,
      menuForm: {
        show: true,
        label: null,
        img: 'el-icon-s-grid',
        code: null,
        url: null,
        type: null,
        order: 0
      },
      menuFormRule: {
        img: [
          { required: true, message: '请选择图标', trigger: 'change' }
        ],
        label: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        order: [
          { required: true, message: '请填写排序', trigger: 'blur' },
          { max: 50, min: 1, type: 'number', message: '请填写1-50的数字', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写权限标识', trigger: 'blur' },
          { validator: validUppercaseLetter, trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请填写url', trigger: 'blur' }
        ],
        show: [
          { required: true, message: '请选择页面显隐', trigger: 'change' }
        ]
      },
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  filters: {
    /**
     * 根据权限类型 转换为图标
     * @param permissionType
     */
    treeIconFormatFilter (permissionType) {
      if (permissionType === 'menu') {
        return 'el-icon-s-unfold'
      } else if (permissionType === 'page') {
        return 'el-icon-s-management'
      } else if (permissionType === 'button') {
        return 'el-icon-open'
      } else {
        return 'el-icon-link'
      }
    }
  },
  methods: {
    /**
     * 删除单条操作
     */
    delMenuAction (row) {
      deleteById(row.id).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.getRightsList()
        }
      })
    },
    delMenu (row) {
      this.$confirm('是否确认删除?', '确认删除').then(_ => {
        this.delMenuAction(row)
      }).catch(_ => {
      })
    },
    addMenu (title, flag, data) {
      this.dialog.title = title
      this.dialog.flag = flag
      this.dialogVisible = true
      if (flag === 'edit' || flag === 'view') {
        selectOne(data.id).then(({ data: res }) => {
          this.menuForm = res
          this.menuForm.order = Number(res.order)
        })
      } else {
        this.menuForm.pId = data ? data.id : 0
      }
      this.$nextTick(() => {
        this.$refs.menuForm.clearValidate()
      })
    },
    menuFormSubmit () {
      if (this.dialog.flag === 'view') {
        this.dialogVisible = false
        return
      }
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.loadingBtn.diaSubmitBtn = true
          if (this.menuForm.type === 'menu') {
            this.menuForm.code = null
            this.menuForm.url = null
            this.menuForm.show = true
          } else if (this.menuForm.type === 'button' || this.menuForm.type === 'button') {
            this.menuForm.url = null
            this.menuForm.img = null
            this.menuForm.order = 0
            this.menuForm.show = true
          }
          if (this.dialog.flag === 'edit') {
            update(this.menuForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.dialogVisible = false
                this.getRightsList()
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          } else {
            insert(this.menuForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.getRightsList()
                this.dialogVisible = false
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * 关闭分配角色弹窗
     */
    closeDialog () {
      this.menuForm = {
        show: true,
        label: null,
        img: 'el-icon-s-grid',
        code: null,
        url: null,
        type: null,
        order: 0
      }
      this.loadingBtn.diaSubmitBtn = false
      this.dialog.flag = ''
      this.dialog.title = ''
      this.$nextTick(() => {
        this.$refs.menuForm.clearValidate()
      })
    },
    async getRightsList () {
      this.loadingBtn.treeLoading = true
      const { data, code } = await getRightsList()
      if (code === this.$constant.SUCCESS) {
        this.treeInfo.permissionTreeData = data
      }
      this.loadingBtn.treeLoading = false
    },
    getMenuIcon () {
      listDicByParentCode('CDTB').then(({ data, code }) => {
        if (code === this.$constant.SUCCESS) {
          this.iconArr = data
        }
      })
    }
  },
  created () {
    this.getRightsList()
    this.getMenuIcon()
  }
}
</script>

<style scoped>
.custom-tree-node {
  width: 100%;
  position: relative;
}

.operate-btns {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
